<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con {
            width: 600px;
            margin: 50px auto 0;
        }

        .inputtxt {
            width: 550px;
            height: 30px;
            border: 1px solid #ccc;
            padding: 0px;
            text-indent: 10px;
        }

        .inputbtn {
            width: 40px;
            height: 32px;
            padding: 0px;
            border: 1px solid #ccc;
        }

        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-top: 20px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .list li span {
            float: left;
        }

        .list li a {
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="root"></div>


<script type="text/babel">
    class TodoList extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                aList: ['1'],
                Stodo: ''
            }
        }

        fnChange(ev) {
            this.setState({
                Stodo: ev.target.value
            })

        }

        FuncAdd() {
            // if (this.state.Stodo === '') {
            //     alert("请输入内容");
            //     return ;
            // }
            //
            // this.setState({
            //     aList: this.state.aList.concat(this.state.Stodo),
            //     Stodo: "",
            // })

            this.setState(pro => {
                if (pro.Stodo === "") {
                    alert("请输入内容");
                    return;
                }
                pro.aList.push(pro.Stodo);
                pro.Stodo = "";
                return pro;

            })

        }

        FuncDel(i) {
            this.setState(pro => {
                let list = [...pro.aList];
                list.splice(i, 1);
                pro.aList = list;
                return {aList: list};

            })
        }

        FuncUp(i) {
            this.setState(prev => {
                if (i === 0) {
                    alert("到顶了");
                    return;
                }
                let list = [...prev.aList];
                let nowItem = list[i];
                list[i] = list[i - 1];
                list[i - 1] = nowItem;

                return {aList: list};


            })
        }

        FuncDown(i) {
            this.setState(prev => {
                if (i === prev.aList.length - 1) {
                    alert("到底了");
                    return;
                }

                let list = [...prev.aList];
                let newValue = list[i];
                list[i] = list[i + 1];
                list[i + 1] = newValue;
                return {aList: list};

            })
        }

        componentDidMount() {
            axios({
                url: 'js/data.json',
                method: 'get',
                responseType: 'json',

            }).then(dat => {
                let list = dat.data.content;
                console.log(list);
                this.setState({
                    aList: list
                })
            }).catch(function () {
                alert("服务器GG");
            })
        }

        render() {
            return (
                <div className="list_con">
                    <h2>To do list</h2>
                    <input type="text" className="inputtxt" value={this.state.Stodo}
                           onChange={this.fnChange.bind(this)}/>
                    <input type="button" value="增加" className="inputbtn" onClick={this.FuncAdd.bind(this)}/>
                    <ul id="list" className="list">
                        {
                            this.state.aList.map((value, index) => {
                                return (<li key={index}>
                                    <span>{value}</span>
                                    <a href="javascript:;" className="up"
                                       onClick={this.FuncUp.bind(this, index)}> ↑ </a>
                                    <a href="javascript:;" className="down"
                                       onClick={this.FuncDown.bind(this, index)}> ↓ </a>
                                    <a href="javascript:;" className="del"
                                       onClick={this.FuncDel.bind(this, index)}>删除</a>
                                </li>)
                            })

                        }
                    </ul>
                </div>
            );
        }
    }

    ReactDOM.render(<TodoList/>, document.getElementById('root'));

</script>

</body>
</body>
</html>